<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户绑定</title>

    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <script src="../../../bootstrap/js/jquery-1.9.1.min.js"></script>
    <script src="../../../bootstrap/js/bootstrap.js"></script>
    <script src="../../../bootstrap/js/vue.js"></script>
    <script src="../../../bootstrap/js/axios.min.js"></script>

    <style>
        .btn{
            width: 80px;
        }
        label,.col-md-3,.col-md-1{
            display:inline;
        }
        .form-control{
            display:inline;
            width:75%;
        }

        .imgBtn{
            display: inline;
            padding: 12px;
            width: 75px;
            height: 35px;
            line-height: 35px;
            border: 1px solid #23c6c8;
            background: #23c6c8;
            color: #fff;
            text-align: center;
            font-size: 14px;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            vertical-align: center;
        }
        .imgBtn:hover{
            border: 1px solid #23babc;
            background: #23BABC;
        }
        .imgBtn input{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .form-control{
            width: 65%;
            display: inline;
        }
 </style>



</head>
<body>

<div id="app">


        <div class="container" style="margin-top:60px" v-if="flag==1">

            <form action="#" class="form-horizontal" role="form">

                <!-- 表单控件组 城市下拉框 -->
                <div class="form-group">
                    <label class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;地区:&nbsp;</label>
                    <div class="col-md-3">
                        <select id="" class="form-control" v-model="areaVal">
                            <option v-for="obj in list" :value="obj">{{obj.name}}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label  class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;姓名:&nbsp;</label>
                    <div class="col-md-3">
                        <input type="text"  class="col-md-3 form-control" v-model="employee.name" placeholder="请输入姓名:">
                    </div>
                </div>

                <div class="form-group">
                    <label  class="control-label col-md-2 col-md-offset-3">手机号:</label>
                    <div class="col-md-3">
                        <input type="text"  class="col-md-3 form-control" v-model="employee.phone" placeholder="请输入手机号:">
                    </div>
                </div>

                <!-- 表单控件组 按钮 -->
                <div class="form-group">
                    <label  class="control-label col-md-2 col-md-offset-3"></label>
                    <div class="col-md-3" style="margin-left: 55px">
                        <button type="button" class="btn btn-success" @click="save" id="binding">绑定信息</button>
                    </div>
                </div>
            </form>
        </div>


        <div class="container" style="margin-top:60px" v-if="flag==2">

            <form action="#" class="form-horizontal" role="form">

                <!-- 表单控件组 城市下拉框 -->
                <div class="form-group">
                    <label class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;地区:&nbsp;</label>
                    <div class="col-md-3" style="padding-top: 7px">
                        {{employee.aname}}
                    </div>
                </div>

                <div class="form-group">
                    <label  class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;姓名:&nbsp;</label>
                    <div class="col-md-3" style="padding-top: 7px">
                        {{employee.name}}
                    </div>
                </div>

                <div class="form-group">
                    <label  class="control-label col-md-2 col-md-offset-3">手机号:</label>
                    <div class="col-md-3" style="padding-top: 7px">
                        {{employee.phone}}
                    </div>
                </div>

                <div class="form-group" v-if="employee.status=='1'" style="color: red">
                    <label  class="control-label col-md-2 col-md-offset-3">
                        如需修改信息，请联系管理员
                    </label>
                </div>

                <!-- 表单控件组 按钮 -->
                <div class="form-group" v-if="employee.status=='0'">
                    <label  class="control-label col-md-2 col-md-offset-3"></label>
                    <div class="col-md-3" style="margin-left: 55px">
                        <button type="button" class="btn btn-success" @click="chageInfo" >修改信息</button>
                    </div>
                </div>
            </form>
        </div>


</div>
</body>
</html>


<script>



    new Vue({
        el:"#app",
        data:{
            list:[],
            areaVal: {"id":null,"name":null},
            employee: {"name":"","phone":"","aid":"","aname":""},
            flag: 1,
            // checkData: false
        },
        created:function (){
            this.selectList()
        },
        methods:{
            selectList:function () {
                axios.get(
                    "/staff/area/selectListAll"
                ).then(response=>{
                    this.list = response.data
                    this.getMyInfo()
                })
            },
            getMyInfo:function () {
                axios.get(
                    "/staff/employee/getInfo"
                ).then(response=>{
                    this.employee = response.data
                    if(this.employee !=null && this.employee != "" ){
                        this.areaVal = {"id":null,"name":null}
                        this.areaVal.id = this.employee.aid
                        this.areaVal.name = this.employee.aname
                        this.flag = 2
                        // this.checkData = true
                    }
                    if(this.employee == ""){
                        this.employee = {}
                    }

                })
            },
            save:function (){
                $("#binding").prop("disabled",true)
                this.employee.aid = this.areaVal.id
                this.employee.aname = this.areaVal.name
                axios.post("/staff/employee/save",this.employee, {
                    headers: {
                        'Content-Type': 'application/json'
                    }})
                    .then(response=>{
                        this.flag=2
                        this.employee.status = '0'
                        $("#binding").prop("disabled",true)
                        alert("绑定成功")
                    })
            },
            chageInfo:function (){
                this.flag=1
            }
        }
    });

</script>

